import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { Button, Spin, Form } from 'antd';
import {
  WeaTab,
  WeaRightMenu,
  WeaErrorPage,
  WeaTools,
  WeaSearchGroup,
  WeaNewScroll,
  WeaFormItem,
  WeaLocaleProvider,
} from 'ecCom';
import { WeaTableNew, WeaSwitch } from 'comsMobx';

const { WeaTable } = WeaTableNew;
const getLabel = WeaLocaleProvider.getLabel;

@WeaTools.tryCatch(
  React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@vi379b`} msg={props.error || getLabel(385218, '对不起，该页面异常，请联系管理员！')} />,
  { error: '' },
)
@inject('docMoveLogStore')
@observer
class DocMoveLog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchType: ['advanced'],
    }
  }

  componentDidMount() {
    const { docMoveLogStore } = this.props;
    const { doSearch, form, getConditionInfo, getRightMenu } = docMoveLogStore;
    doSearch('DocLog', { operatetype: 'copymove', ...form.getFormParams() });
    getConditionInfo('DocLog', { operatetype: 'copymove' });
    getRightMenu('DocLog');
  }

  componentWillUnmount() {
    const { docMoveLogStore } = this.props;
    docMoveLogStore.setState({ showSearchAd: false });
  }
  setShowSearchAd=(bool)=> {
    const { docMoveLogStore } = this.props;
    const { setState } = docMoveLogStore;
    setState({ showSearchAd: bool });
  }
  onSearch = () => {
    const { docMoveLogStore } = this.props;
    const { form } = docMoveLogStore;
    doSearch('DocLog', { operatetype: 'copymove', ...form.getFormParams() });
  }
  hideSearchAd = () => {
    const { docMoveLogStore } = this.props;
    const { setState } = docMoveLogStore;
    setState({ showSearchAd: false })
  }
  render() {
    const { docMoveLogStore } = this.props;
    const { loading, comsWeaTableStore, form, showSearchAd, setState } = docMoveLogStore;
    const loadingNow = loading || comsWeaTableStore.loading;
    return (
      <div className="wea-doc-log">
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@mkrmf0`} datas={this.getRightMenu()}>
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@84jz4i`}
            showSearchAd={showSearchAd}
            setShowSearchAd={this.setShowSearchAd}
            searchsAd={this.getSearchs()}
            buttonsAd={this.getTabButtonsAd()}
            searchType={this.state.searchType}
            onSearch={this.onSearch}
            hideSearchAd={this.hideSearchAd}
          />
          <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@4ov6ji`} height={355}>
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@ta9eeu`} spinning={loadingNow}>
              <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@3yhb4z`}
                comsWeaTableStore={comsWeaTableStore}
                hasOrder={true}
                needScroll={true}
              />
            </Spin>
          </WeaNewScroll>
        </WeaRightMenu>
      </div>
    );
  }

  // 高级搜索条目
  getSearchs() {
    const { docMoveLogStore } = this.props;
    const { conditioninfo, form } = docMoveLogStore;
    const { isFormInit } = form;
    const group = [];
    const formParams = form.getFormParams();
    isFormInit && toJS(conditioninfo).forEach((c) => {
      let items = [];
      c.items.forEach((field) => {
        items.push({
          com: (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@crq8eu@${field.domkey[0]}`}
              label={`${field.label}`}
              labelCol={{ span: field.labelcol }}
              wrapperCol={{ span: field.fieldcol }}
            >
              <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@wehdic@${field.domkey[0]}`} fieldConfig={field} form={form} formParams={formParams} />
            </WeaFormItem>
          ),
          colSpan: 1,
        });
      });
      group.push(
        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@o59oyk@${c.title}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} />,
      );
    });
    return group;
  }

  // 高级搜索按钮
  getTabButtonsAd() {
    const { docMoveLogStore } = this.props;
    const { form, doSearch, setState } = docMoveLogStore;
    return [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@j6xd3m@search`} type="primary"
        onClick={() => {
          doSearch('DocLog', { operatetype: 'copymove', ...form.getFormParams() });
          setState({ showSearchAd: false });
        }}
      >{getLabel(197, '搜索')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3pa2da@reset`} type="ghost" onClick={() => form.reset()}>{getLabel(2022, '重置')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@d3kbc1@cancle`} type="ghost" onClick={() => setState({ showSearchAd: false })}>{getLabel(31129, '取消')}</Button>,
    ];
  }

  // 右键菜单
  getRightMenu() {
    const { docMoveLogStore } = this.props;
    const { doSearch, rightMenu, form } = docMoveLogStore;
    const btnArr = [];
    rightMenu.forEach((m) => {
      btnArr.push({
        key: m.type,
        icon: <i className={m.menuIcon} />,
        content: m.menuName,
        disabled: false,
        onClick: () => {
          doSearch('DocLog', { operatetype: 'copymove', ...form.getFormParams() });
        },
      });
    });
    return btnArr;
  }
}

export default DocMoveLog;
